<template>
  <view class="group-item">
    <view class="item" :class="{'no_group' : !is_group}" v-for="(item, index) in list" :key="index">
      <view class="product" v-if="item.product && item.product.mainImage">
        <view class="image" @click="goProduct(item)">
          <u--image v-if="is_group" lazy-load width="200rpx" height="200rpx" :fade="true" duration="450" mode="widthFix" :src="baseUrl + item.product.mainImage.path"></u--image>
          <u--image v-else lazy-load width="300rpx" height="300rpx" :fade="true" duration="450" mode="widthFix" :src="baseUrl + item.product.mainImage.path"></u--image>
        </view>
      </view>
      <view class="desc">
        <view class="time" v-if="is_group && false">发起时间: {{ item.create_time }}</view>
        <!--<view class="time">{{ item.create_time }}</view>-->
        <view class="title two-lines" v-if="item.product">{{item.product.title}}</view>
        <view class="params">
          <view>{{ total }}人团</view>
          <view v-if="item.user">团长: {{ item.user.nickname }}</view>
          <view class="diff" v-if="item.fans && total - item.fans.length > 0">还差{{ total - item.fans.length }}人</view>
        </view>
        <view class="fans" v-if="item.fans && item.fans.length >= 1">
          <u-avatar class="x" v-for="(o, i) in item.fans" :key="i" :src="getAvatar(o.user)" size="60"></u-avatar>
        </view>
        <view class="price" v-if="item.product">￥{{item.product.price_group}}</view>
        <view class="price_buy" v-if="!is_group && item.product">购买价: ￥{{item.product.price}}</view>
        <view class="price_buy" v-if="is_group">趣拼团</view>
        <view class="btn" @click="_runGroup(item)" v-if="is_group">
          <view class="k"></view>
            <view class="text">去拼团</view>
            <view class="color">GO</view>
        </view>
        <view class="btn" @click="goProduct(item)" v-else>
          <view class="k"></view>
          <view class="text buy">详情</view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import color from '@/config/color.js'
import config from '@/config/config.js'
import base64 from '../../../util/base64'
export default {
  props: {
    list: {
      type: Array,
      default: []
    },
    total: {
      type: Number,
      default: 10
    },
    is_group: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      baseUrl: config.baseUrl,
      activeColor: color.main_color,
    }
  },
  created() {
    // console.log(this.list)
  },
  methods: {
    getAvatar(user) {
      if (!user) {
        return ''
      }
      return +user.av === 0 ? user.avatar : config.baseUrl + user.avatar
    },
    goProduct(item) {
      uni.navigateTo({
        url: `/sub_product/detail/index?id=${item.product_id}`
      })
    },
    // 跳过详情, 直接拼团
    _runGroup(item) {
      const options = {
        group_id: item.id,
        product_id: item.product_id,
        quantity: 1,
        join_group: true,
        // todo 这里没有SKU选择
        price: item.product.price_group
      }
      // 存在sku
      // if (item.order && item.order.item) {
      //   const x = item.order.item[0]
      //   options.price = x.price
      //   if (x.product_sku_id) {
      //     options.product_sku_id = x.product_sku_id
      //   }
      // }
      // console.log(item)
      // return
      const params = base64.encodeUrl(options)
      uni.navigateTo({
        url: `/sub_main/order/index?params=${params}`
      })
    }
  }
}
</script>

<style scoped lang="scss">
.group-item {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.item {
  box-sizing: border-box;
  width: 100%;
  padding: 0 20rpx;
  background: white;
  margin-bottom: 10rpx;
  border-radius: 10rpx;
  display: flex;
  align-items: center;
  //flex-direction: column;
  &.no_group {
    //width: 350rpx;
    width: calc(50% - 5rpx);
    flex-direction: column;
    box-sizing: border-box;
    .image {
      //width: 345rpx;
      //height: 345rpx;
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }
  .image {
    //width: 100rpx;
    //height: 300rpx;
    width: 210rpx;
    display: flex;
    align-items: center;
    padding: 10rpx;
  }
  .desc {
    flex: 1;
    padding: 20rpx;
    //background: red;
    width: 95%;
    .time {
      color: #999999;
      margin-bottom: 10rpx;
      //font-size: 24rpx;
    }
    .title {
      font-weight: 700;
    }
    .params {
      display: flex;
      flex-wrap: wrap;
      margin-top: 10px;
      view {
        display: inline-block;
        background: $main_color;
        margin-right: 10rpx;
        padding: 2rpx 5rpx;
        color: white;
        //font-size: 20rpx;
        margin-bottom: 5rpx;
        &.diff {
          background: none;
          //color: $main_color;
          color: red;
          //border: 1rpx solid $main_color;
          border: 1rpx solid red;
        }
      }
    }
    .fans {
      display: flex;
      flex-wrap: wrap;
      margin-top: 10px;
      .x {
        margin-right: 10rpx;
        margin-bottom: 10rpx;
      }
    }
    .price {
      color: red;
      height: 25px;
      line-height: 25px;
      font-weight: 700;
      font-size: 28rpx;
    }
    .price_buy {
      background: #f3f5f7;
      padding: 10rpx 20rpx;
      display: inline-block;
      font-size: $group_price;
      margin-bottom: 10rpx;
    }
    .btn {
      display: flex;
      justify-content: end;
      margin-bottom: 10px;
      view {
        border: 1rpx solid $main_color;
        padding: 5px 10rpx;
        color: $main_color;
        //font-size: 22rpx;
        &.color {
          background: $main_color;
          color: white;
          border-top-right-radius: 10rpx;
          //border-bottom-right-radius: 10rpx;
        }
        &.text {
          border-bottom-left-radius: 10rpx;
          //border-top-left-radius: 10rpx;
          &.buy {
            width: 80rpx;
            text-align: center;
            border-top-right-radius: 10rpx;
          }
        }
        /* 解决小程序样式 */
        &.k {
          border: none;
          background: none;
          display: block;
          flex: 1;
        }
      }
    }
  }

}
</style>
